<template>
  <lay-ripple>
    <div class="mycontainer" @click="getValue(itemvalue)">
      <div id="left">
        <lay-icon type="layui-icon-triangle-r"></lay-icon>
        {{ itemname }}
      </div>
      <lay-icon
        type="layui-icon-fonts-code"
        color="#1E9FFF"
        size="24px"
      ></lay-icon>
    </div>
  </lay-ripple>
</template>

<script lang="ts" setup>
import Clipboard from "clipboard";
import { layer } from "@layui/layui-vue";
const getValue = (value: any) => {
let clipboard = new Clipboard(".mycontainer", {
    text: () => {
      //返回需要复制的字符串
      return value;
    },
  });
  clipboard.on("success", () => {
    layer.msg("复制成功");
    clipboard.destroy();
    //invoke('mouse_click');
  });
  clipboard.on("error", () => {
    clipboard.destroy();
  });
};
defineProps({
  itemname: {
    type: String,
    require: true,
  },
  itemvalue: {
    type: String,
    require: true,
  },
});
</script>

<style scoped>
.mycontainer {
  display: flex;
  padding: 15px 10px;
  align-items: center;
  user-select: none;  
  border-bottom: 1px solid #eee;
  cursor: pointer;
  & > :not(#left) {
    margin-left: auto;
  }
}
</style>
